<template>
    <el-row>
        <el-col :span="1">
            <el-link :underline="false" @click="ChangeisCollapse">
                <IconCom icon="Expand"></IconCom>
            </el-link>
        </el-col>
        <el-col :span="11">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <a href="/">
                        <el-icon class="middle">
                            <house />
                        </el-icon>
                        <span class="middle">首页</span>
                    </a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span class="middle">{{ router.currentRoute.value.name }}</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
        <el-col :span="12">
            <el-link class="dropdown">
                <el-avatar :size="30" :src="circleUrl" />
                <el-dropdown>
                    <span>
                        {{ NickName }}
                        <el-icon>
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item><a href="/" style="text-decoration: none;"
                                    class="inherit-color">我的主页</a></el-dropdown-item>
                            <el-dropdown-item @click="logOut">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-link>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <el-divider />
            <!-- <el-tag class="mx-1" effect="dark">菜单管理</el-tag>
            <el-tag class="mx-1" effect="plain">用户管理</el-tag> -->
            <div>
                <el-tag v-for="item in tags" :key="item.Index" closable class="ml-2"
                    :effect="item.Checked ? 'dark' : 'plain'" @close="handleClose(item.Index)"
                    @click="tagClick(item.Index, item.Name)">
                    {{ item.Name }}
                </el-tag>
            </div>
        </el-col>
    </el-row>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import router from '../router'
import IconCom from '../components/IconCom.vue'
import useStore from '../store/index'
import { tagClick, handleSelect, FormatToken } from '../tools';
const circleUrl = ref(FormatToken(useStore().token)?.Image)
const NickName = ref(FormatToken(useStore().token)?.UserName)
const ChangeisCollapse = () => {
    useStore().$patch({
        isCollapse: !useStore().isCollapse
    })
}
//从全局中读取tags
const tags = ref(useStore().tags)
const handleClose = (index: string) => {
    //排除逻辑，点了菜单管理=》角色管理和用户管理
    tags.value = tags.value.filter(f => f.Index != index)
    useStore().$patch({ tags: tags.value })
}
onMounted(() => {
    let index = router.currentRoute.value.path
    let name = router.getRoutes().filter(i => i.path == index)[0].name as string
    if (!tags.value.find(p => p.Checked)) {
        handleSelect(index) //点击tag
    }
    tagClick(index, name)
})

//退出系统方法
const logOut = () => {
    useStore().reset()
    router.push({ path: "/login" })
}
</script>

<style scoped lang="scss">
.el-header {
    .el-col {
        height: 50px;
        line-height: 50px;

        .el-breadcrumb {
            line-height: inherit;
        }

        .el-icon {
            margin-right: 5px;
        }

        .el-divider {
            margin: 0;
        }
    }
}

.dropdown {
    float: right;
    height: 50px;
    line-height: 50px;
}

.el-dropdown {
    margin-top: 15px;
    margin-left: 5px;
}

.ml-2 {
    //彼此之间间隔10px
    margin-left: 10px;
    //设置鼠标样式
    cursor: pointer;
}

.inherit-color {
    color: inherit;
}</style>